﻿@page "/stock-chart/hide-period-selector"
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor
@using Newtonsoft.Json
@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;
@using ThemeHelper

<SampleDescription>
    <p>This sample visualizes the Stock Chart</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the Stock Chart. <code>CandleSeries</code> is used to represent selected data value.</p>
</ActionDescription>


@if (DataSource == null)
{
    <div class="stockchartloader">
    </div> 
}
else
{
    <div class="@loadClass">
    </div>
    <div class="@loadDiv">
        <SfStockChart Title="AAPL Stock Price" EnablePeriodSelector="false" Theme="@theme">
            <StockChartEvents OnLoaded="@ChartLoaded"></StockChartEvents>
            <StockChartPrimaryXAxis>
                <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
                <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
            </StockChartPrimaryXAxis>
            <StockChartPrimaryYAxis>
                <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
                <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
            </StockChartPrimaryYAxis>
            <StockChartTooltipSettings Enable="true"></StockChartTooltipSettings>
            <StockChartCrosshairSettings Enable="true"></StockChartCrosshairSettings>
            <StockChartSeriesCollection>
                <StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Area"></StockChartSeries>
            </StockChartSeriesCollection>
            <StockChartChartArea>
                <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
            </StockChartChartArea>
        </SfStockChart>
    </div>
    <style>
        .stockchartloader {
            border: 6px solid #f3f3f3;
            border-top: 6px solid #7a0fff;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 46%;
            left: 46%;
            border-radius: 50%;
            -webkit-animation: loader 2s linear infinite;
            animation: loader 2s linear infinite;
        }

        .stockchartdiv {
            visibility: hidden;
        }
    </style>
}

@code { 

    public List<ChartSeriesType> nulldata = new List<ChartSeriesType>();
    private ChartData[] DataSource;
    protected override async Task OnInitializedAsync()
    {
        BeforeRender();
        await Task.Run(() =>
        {
            DataSource = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/stock-chart/chart-data.json"));
        });
    }
    public class ChartData
    {
        public DateTime date { get; set; }
        public double open { get; set; }
        public double low { get; set; }
        public double close { get; set; }
        public double high { get; set; }
        public double volume { get; set; }
    }
    string loadClass = "stockchartloader";
    string loadDiv = "stockchartdiv";
    void ChartLoaded(StockChartEventArgs args)
    {
        loadClass = "";
        loadDiv = "";
        StateHasChanged();
    }

    Theme theme = Theme.Bootstrap4;
    void BeforeRender()
    {
        theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    } 
}